<!--
 * @Author: wangyu
 * @Date: 2024-12-27 15:59:34
 * @LastEditTime: 2024-12-27 17:18:17
 * @LastEditors: wangyu
 * @Description: 
 * @FilePath: \dzsq-smartpark-platform\src\views\test\index.vue
-->
<template>
  <div id="aChart" style="height: 100%; width: 100%"></div>
</template>

<script setup>
import Charts from "@/utils/initEcharts";
import * as echarts from "echarts";
import { nextTick, onMounted } from "vue";

let chartsObj1 = null;
const colors = ["#59DEFF", "#239aff"];
const option = {
  tooltip: {
    trigger: "axis",
  },
  color: [colors[1], colors[0]],
  legend: {
    data: ["企业入驻数量", "企业完缴数量"],
    icon: "rect",
    textStyle: {
      color: "#ffffff",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: ["2018", "2019", "2020", "2021", "2022", "2023", "2024"],
    axisLabel: {
      color: "#ffffff",
    },
  },
  yAxis: [
    {
      type: "value",
      axisLabel: {
        color: "#ffffff",
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "企业入驻数量",
      type: "line",
      stack: "Total",
      smooth: 0.4,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(31, 183, 211, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(119, 219, 237, 0.1)", // 100% 处的颜色
            },
          ],
          false
        ),
      },
      lineStyle: {
        color: colors[0],
      },
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "企业完缴数量",
      type: "line",
      stack: "Total",
      smooth: 0.4,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(31, 183, 211, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(119, 219, 237, 0.1)", // 100% 处的颜色
            },
          ],
          false
        ),
      },
      lineStyle: {
        color: colors[1],
      },
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ],
};
const myCharts1 = ref();
onMounted(() => {
  chartsObj1 = new Charts(document.getElementById("aChart"), option);
  myCharts1.value = chartsObj1.init();
  nextTick(() => {
    myCharts1.value = chartsObj1.init();
  });
});
</script>
<style scoped lang="scss">
</style>
